<template>
	<view class="p-b-160 m-b-160">
		<!-- 有数据时显示地址列表 -->
		<view v-if="list && list.length > 0">
			<view v-for="(item,index) in list" :key="index" @click="back(item)">
				<view class="w-750 bgc-white br-10 p-l-25 p-r-25 p-t-25" >
					<view class="b-b p-b-40 p-t-30">
						<view class="f-28 d-flex-items-center d-flex-between">
							<text class="m-r-40 f-34 ">{{item.contact_name}}</text> 
							{{item.contact_phone}}
						</view>
						<view class="f-28 c-99 m-t-20">
							{{item.province}}
							{{item.city}} 
							{{item.district}} 
						</view>
					</view>
					<view class="h-90 d-flex-between d-flex-items-center">
						<view class="d-flex-items-center" v-show="item.is_default == 1">
							<image src=" https://www.shuyunpt.com/app/image/order/1.png" class="w-40 h-40"></image>
							<view class="c-66 m-l-10">默认地址</view>
						</view>
						<view class="c-66 d-flex-items-center">
							<view class="d-flex-items-center" @click.stop="removeClick(item.address_id)">
								<image src=" https://www.shuyunpt.com/app/image/order/detail.png" class="w-24 h-30 m-r-12"></image>
								<view>删除</view>
							</view>
						</view>
					</view>
				</view>
				<view class="w-750 h-20 bgc-f6"></view>
			</view>
		</view>
		
		<!-- 无数据时显示空状态 -->
		<view v-else class="empty-container">
			<image src="https://www.shuyunpt.com/app/image/empty/empty-address.png" class="empty-image" mode="widthFix"></image>
			<view class="empty-text">暂无地址信息</view>
			<view class="empty-desc">您还没有添加地址，快去添加吧~</view>
		</view>
		<view class="position-fixed left-0 right-0 bottom-0 h-140 d-flex-items-center d-flex-end p-l-25 p-r-25 bgc-white">
			<view class="btn-add w-700 lh-80 h-80 br-60 align-center c-white f-32"
				@click="$jump.navigateTo('/pages/address/add-address?type=' + type)">
				新增收货地址
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				id:"",
				list:[],
				type:2
			}
		},
		onLoad(params){
			if(params.type == 1){
				this.type = 1
				this.id = params.id
			}
		},
		onShow(){
			this.getAddress()
		},
		methods:{
			async getAddress(){
				const res = await this.$service({
					url:"/api/member.user/getUserAddress",
					method:"GET"
				})
				console.log(res)
				this.list = res.data
			},
			removeClick(id){
				const _this = this
				uni.showModal({
				    title: '提示',
				    content: '是否要删除此地址?',
				    showCancel: true, // 是否显示取消按钮
				    cancelText: '取消',
				    confirmText: '确定',
				    success (res) {
				        if (res.confirm) {
							_this.$service({
								url:"/api/member.user/delUserAddress",
								data:{
									address_id:id
								}
							}).then(val=>{
								console.log(val)
								_this.$hint.desc(val.msg)
								if(val.code == 1){
									_this.getAddress()
								}
							})
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			back(item){
				if(this.type == 1){
					let _this = this;
					uni.$emit('updateAdressId', JSON.stringify(item));
					uni.navigateBack()
				}
			}
		}
	}
</script>

<style scoped>
	.items{
		background: #383838;
		border-radius: 4px;
		color:#fff;
	}
	.bgc-f6{
		background: #F6F6F6;
	}
	.btn-add{
		background: linear-gradient( 90deg, #FFEACB 0%, #E8BC77 100%);
	}
	
	/* 空状态样式 */
	.empty-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 200rpx 40rpx;
		text-align: center;
	}
	
	.empty-image {
		width: 300rpx;
		height: 300rpx;
		margin-bottom: 40rpx;
	}
	
	.empty-text {
		font-size: 32rpx;
		color: #333;
		font-weight: 500;
		margin-bottom: 20rpx;
	}
	
	.empty-desc {
		font-size: 28rpx;
		color: #999;
		line-height: 1.5;
	}
</style>